<!--操作-->
<nz-row>
  <button nz-button nzType="primary" (click)="appendCategory()">添加分类</button>
</nz-row>
<!--表格-->
<nz-table
  #rowSelectionTable
  nzShowSizeChanger
  [nzData]="listOfData.records"
  [nzPageSizeOptions]="[5, 10, 20, 50, 100]"
  [nzTotal]="listOfData.total"
  [nzPageIndex]="listOfData.current"
  [nzPageSize]="listOfData.size"
  [nzShowTotal]="totalTemplate"
  (nzPageIndexChange)="onPageIndexChange($event)"
  (nzPageSizeChange)="onPageSizeChange($event)"
>
  <thead>
  <tr>
    <th nzAlign="center">排序</th>
    <th nzAlign="center">名称</th>
    <th nzAlign="center">状态</th>
    <th nzAlign="center" nzWidth="250px">操作</th>
  </tr>
  </thead>
  <tbody>
  <tr *ngFor="let data of rowSelectionTable.data;let index=index">
    <td nzAlign="center">{{ index + 1 }}</td>
    <td nzAlign="center">{{ data.name }}</td>
    <td nzAlign="center">{{ data.status }}</td>
    <td  nzAlign="center" style="display: flex;flex-direction: row;justify-content: space-evenly">
      <a>上移</a>
      <a>下移</a>
      <a>禁用</a>
      <a (click)="edit(data)">编辑</a>
      <a style="color: red"
         nzPopconfirmPlacement="top"
         nz-popconfirm
         nzPopconfirmTitle="确认要删除该数据吗?"
         nzOkText="确认"
         nzCancelText="取消"
         (nzOnConfirm)="deleteRow(data.id)">删除</a>
    </td>
  </tr>
  </tbody>
</nz-table>
<!-- 分页template -->
<ng-template #totalTemplate let-total>共有 {{ listOfData.total }} 条</ng-template>
<!--模态框-->
<nz-modal [(nzVisible)]="modal.modalVisible" [nzTitle]="modal.isAdd?'添加分类':'编辑分类'" (nzOnCancel)="handleModalCancel()" (nzOnOk)="handleModalOk()">
  <ng-container *nzModalContent>
    <nz-row class="modalRow">
      <label for="name"><span>*</span>名称:</label>
      <input id="name" nz-input placeholder="请输入分类名称" [(ngModel)]="form.name"/>
    </nz-row>
    <nz-row class="modalRow">
      <label for="status"><span>*</span>状态:</label>
      <nz-radio-group id="status" [(ngModel)]="form.status">
        <label nz-radio nzValue="1">启用</label>
        <label nz-radio nzValue="0">禁用</label>
      </nz-radio-group>
    </nz-row>
  </ng-container>
</nz-modal>
